import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    width: contentRow.implicitWidth + 20
    height: Math.max(checkBoxSize, textItem.implicitHeight) + 10  // 取最大高度确保内容不被截断

    // 核心属性
    property bool checked: false
    property string text: "选项"
    property bool enabled: true

    // 尺寸属性
    property real checkBoxSize: 24.0  // 选中框尺寸
    property real fontSize: 16.0      // 文字大小

    // 样式属性
    property color checkColor: "#2196F3"
    property color borderColor: "#000000"
    property color textColor: "black"
    property color disabledColor: "#999999"
    property real borderWidth: 1.5
    property real spacing: 10        // 选中框与文字间距

    signal toggled(bool checkedState)

    AbstractButton {
        id: checkButton
        anchors.fill: parent
        enabled: root.enabled
        checked: root.checked
        onCheckedChanged: root.checked = checked

        contentItem: Row {
            id: contentRow
            anchors.verticalCenter: parent.verticalCenter  // 整体在按钮中垂直居中
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: root.spacing

            // 选中框（确保与文字垂直居中）
            Item {
                id: checkBoxContainer
                width: root.checkBoxSize
                height: root.checkBoxSize
                anchors.verticalCenter: parent.verticalCenter  // 选中框容器垂直居中

                Rectangle {
                    anchors.fill: parent
                    border.width: root.borderWidth
                    border.color: checkButton.checked ? root.checkColor : root.borderColor
                    color: checkButton.checked ? root.checkColor : "transparent"
                    radius: 2
                    Behavior on color { ColorAnimation { duration: 150 } }
                    Behavior on border.color { ColorAnimation { duration: 150 } }
                }

                Canvas {
                    visible: checkButton.checked
                    anchors.fill: parent
                    opacity: checkButton.checked ? 1 : 0
                    Behavior on opacity { NumberAnimation { duration: 150 } }

                    onPaint: {
                        const ctx = getContext("2d");
                        ctx.resetTransform();
                        ctx.clearRect(0, 0, width, height);

                        ctx.strokeStyle = "white";
                        ctx.lineWidth = Math.max(1, root.checkBoxSize / 10);
                        ctx.lineCap = "round";
                        ctx.lineJoin = "round";

                        ctx.beginPath();
                        ctx.moveTo(width * 0.25, height * 0.5);
                        ctx.lineTo(width * 0.45, height * 0.75);
                        ctx.lineTo(width * 0.75, height * 0.25);
                        ctx.stroke();
                    }
                }
            }

            // 文字（确保与选中框垂直居中）
            Text {
                id: textItem
                text: qsTr(root.text)
                font.pixelSize: root.fontSize
                color: checkButton.enabled ? root.textColor : root.disabledColor
                anchors.verticalCenter: parent.verticalCenter  // 文字垂直居中
                font.bold: false
                // 文字高度与选中框协调，避免视觉偏移
                height: checkBoxContainer.height
                verticalAlignment: Text.AlignVCenter  // 文字自身内容垂直居中
            }
        }

        onClicked: {
            checkButton.checked = !checkButton.checked;
            root.toggled(checkButton.checked);
        }
    }
}
